<template>  
    <div class="not-found-page">  
      <div class="image-container">  
        <img class="not-found-image" src="../../assets/images/404.gif" alt="404 Not Found">  
      </div>  
      <h1 class="page-title">404</h1>  
      <p class="page-subtitle">页面未找到</p>  
      <p class="page-description">对不起，你似乎来到了一个不存在的页面。</p>  
      <div class="actions">  
        <router-link to="/" class="home-link">返回首页</router-link>  
        <!-- 如果有搜索组件，可以放在这里 -->  
        <!-- <search-component /> -->  
      </div>  
    </div>  
  </template>  
      <!-- 
            <img src="../../assets/images/404.gif" alt="404" class="not-found-image" />  
  
       -->
    <script>  
    import { ref } from 'vue';  
      
    export default {  
      name: 'NotFound',  
      setup() {  
        // 可以在这里添加一些响应式状态或逻辑，例如跟踪搜索查询等  
        const searchQuery = ref('');  
      
        // 返回响应式状态或方法，如果需要的话  
        return {  
          searchQuery,  
        };  
      },  
    };  
    </script>  
      
    <style scoped>  
  @keyframes slideUp {  
    from {  
      transform: translateY(100%);  
      opacity: 0;  
    }  
    to {  
      transform: translateY(0);  
      opacity: 1;  
    }  
  }  
    
  .not-found-page {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    justify-content: center;  
    height: 100vh;  
    text-align: center;  
    color: #333;  
    font-family: 'Arial', sans-serif;  
    animation: slideUp .6s ease-out forwards; /* 应用动画 */  
  }  
    
  .image-container {  
    margin-bottom: 2rem;  
  }  
    
  .not-found-image {  
    width: 300px; /* 你可以根据需要调整图片大小 */  
    height: auto;  
  }  
    
  .page-title {  
    font-size: 3rem;  
    margin-bottom: 0.5rem;  
    color: #666;  
  }  
    
  .page-subtitle {  
    font-size: 1.5rem;  
    margin-bottom: 1rem;  
    color: #999;  
  }  
    
  .page-description {  
    font-size: 1rem;  
    margin-bottom: 2rem;  
  }  
    
  .actions {  
    display: flex;  
    justify-content: center;  
  }  
    
  .home-link {  
    display: inline-block;  
    padding: 0.5rem 1rem;  
    background-color: #007bff;  
    color: #fff;  
    text-decoration: none;  
    border-radius: 4px;  
    margin: 0 0.5rem;  
    transition: background-color 0.3s ease;  
  }  
    
  .home-link:hover {  
    background-color: #0056b3;  
  }  
    </style>